<template>
  <div class="editer flex-1 overflow-h flex-col">
    <Toolbar class="van-hairline--top" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
    <Editor
      class="flex-1 overflow-y"
      v-model="content"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="handleCreated"
    />
  </div>
</template>

<script setup>
import { onBeforeUnmount, ref, shallowRef, onMounted, defineExpose, watch, defineEmits } from 'vue';

import '@wangeditor/editor/dist/css/style.css';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
import { DomEditor } from '@wangeditor/editor';
import { getToken } from '@/utils/auth';
import cache from '@/utils/cache';
const BASE_API = import.meta.env.VITE_APP_BASE_API;
const emits = defineEmits(['update:modelValue']);
const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  }
});

// 编辑器对象
const editorRef = shallowRef();
const content = ref('');

// 简约模式
const mode = 'simple';

// 工具栏配置
const toolbarConfig = {
  //'header1', 'header2', 'header3','header4', 'through', "code","codeBlock","insertTable",'italic','bulletedList', 'numberedList',
  // 'todo', 'justifyLeft','justifyCenter', 'justifyRight', '|',
  toolbarKeys: [
    'fontSize',
    'emotion',
    {
      key: 'group-image',
      title: '图片',
      iconSvg:
        '<svg viewBox="0 0 1024 1024"><path d="M959.877 128l0.123 0.123v767.775l-0.123 0.122H64.102l-0.122-0.122V128.123l0.122-0.123h895.775zM960 64H64C28.795 64 0 92.795 0 128v768c0 35.205 28.795 64 64 64h896c35.205 0 64-28.795 64-64V128c0-35.205-28.795-64-64-64zM832 288.01c0 53.023-42.988 96.01-96.01 96.01s-96.01-42.987-96.01-96.01S682.967 192 735.99 192 832 234.988 832 288.01zM896 832H128V704l224.01-384 256 320h64l224.01-192z"></path></svg>',
      menuKeys: ['insertImage', 'uploadImage']
    },
    'justifyLeft',
    'justifyCenter',
    'justifyRight',
    'bulletedList',
    'numberedList',
    'blockquote',
    'bold',
    'underline',
    'color',
    'bgColor',
    'clearStyle',
    'insertLink',
    'undo',
    'redo'
  ]
};

// 编辑器配置
const editorConfig = {
  placeholder: '请输入内容...',
  MENU_CONF: {
    uploadImage: {
      //上传图片配置
      server: BASE_API + '/yx_biz/common/upload', //上传接口地址
      fieldName: 'file', //上传文件名
      methods: 'post',
      metaWithUrl: true, // 参数拼接到 url 上
      headers: {
        Authorization: `Bearer ${cache.local.setTokenloc()}` // getToken()
      },
      // 单个文件上传成功之后
      onSuccess(file, res) {
        console.log(`${file.name} 上传成功`, res);
      },
      // 自定义插入图片
      customInsert(res, insertFn) {
        const { url: src } = res;
        console.log(res);
        const node = {
          type: 'image',
          src,
          style: { width: '100%', height: '50px' },
          children: [{ text: '' }]
        };
        editorRef.value.insertNode(node);
      }
    }
  }
};

watch(
  () => [content.value, props.modelValue],
  ([n1, n2], [o1, o2]) => {
    if (n1 != o1) {
      emits('update:modelValue', n1);
    }

    if (n2 != o2) {
      content.value = n2;
    }
  }
);

// 测试用
onMounted(() => {
  // setTimeout(() => {
  /* 获取工具栏 */
  // const toolbar = DomEditor.getToolbar(editorRef.value);
  // const curToolbarConfig = toolbar.getConfig();
  // console.log(curToolbarConfig);
  /* END */
  // content.value = '<p>模拟 Ajax 异步设置内容</p>'
  // }, 1500);
});

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});

// 实例赋值
function handleCreated(editor) {
  editorRef.value = editor; // 记录 editor 实例，重要！
}

defineExpose({
  editorRef
});
</script>
<style scoped lang="scss"></style>
